const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  entry: "./src/main.js",
  output:{
    path: path.resolve(__dirname, '.public'),
    filename: 'main.js'
  },
  devServer: {
    contentBase: './.public',
    open: true
  },
  resolve: {
    // 加快搜索速度
    modules: [path.resolve(__dirname, 'node_modules')],
    // es tree-shaking
    mainFields: ['jsnext:main', 'browser', 'main'],
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,  // 可以打包后缀为sass/scss/css的文件
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            // options: {
            //   这里可以指定一个 publicPath
            //   默认使用 webpackOptions.output中的publicPath
            //   publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
            //   如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
            //   publicPath: './',
            //   publicPath: devMode ? './' : '../',   // 根据不同环境指定不同的publicPath
            //   hmr: devMode, // 仅dev环境启用HMR功能
            // },
          },
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.(gif|png|jpe?g|eot|woff|ttf|svg|pdf)$/,
        loader: 'base64-inline-loader',
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html' //引入模板文件,自动导入
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin() //每次清除无效文件
  ],
  mode: "development",
  devtool: 'source-map',
};
